<script lang="ts">
import { defineComponent, watch, ref, reactive } from "vue";
import { UserModule } from "@/store/modules/user";
import { getSendList } from "@/api";

export default defineComponent({
    props: {
        recordType: {
            type: Number,
            default: 0,
        },
    },
    setup(props) {
        const setat = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list = ref([]);
        const onLoad = async () => {
            const res = await getSendList({
                pageNum: setat.pageNum - 1,
                pageSize: setat.pageSize,
                recordType: props.recordType,
            });
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            list.value = res.data.data.SendList || [];
            setat.total = res.data.data.Total;
            loading.value = false;
            // setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        const onRefresh = () => {
            setat.pageNum = 1;
            // finished.value = false;
            refreshing.value = true;
            loading.value = true;
            onLoad();
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    onRefresh();
                }
            },
            { immediate: true }
        );
        return {
            setat,
            list,
            refreshing,
            loading,
            finished,
            onLoad,
            onRefresh,
        };
    },
});
</script>

<template>
    <div class="logs">
        <div class="name">
            <img src="@/assets/image/image1.png" alt="" srcset="" />
            {{ $t("layout.WithdrawalRecords") }}
        </div>
        <div class="list">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    :finished-text="$t('layout.noMore')"
                    @load="onLoad"
                    disabled
                >
                    <ul>
                        <li v-for="(item, index) in list" :key="index">
                            <div class="cell1">
                                <div class="label">HF</div>
                                <div class="value">-{{ item.Amount }}</div>
                            </div>
                            <div class="cell2">
                                <div class="time">{{ item.CreatedAt }}</div>
                                <div
                                    class="status"
                                    :class="'status' + item.Status"
                                >
                                    {{
                                        $t(
                                            `layout.${
                                                [
                                                    "AwaitingReview",
                                                    "Withdrawalinprogress",
                                                    "Withdrawalinprogress",
                                                    "WithdrawalFailed",
                                                    "WithdrawalSuccessful",
                                                    "WithdrawalRejected",
                                                ][item.Status]
                                            }`
                                        )
                                    }}
                                </div>
                            </div>
                        </li>
                    </ul>
                </van-list>
            </van-pull-refresh>
        </div>
        <van-pagination
            v-model="setat.pageNum"
            :total-items="setat.total"
            :show-page-size="6"
            :items-per-page="setat.pageSize"
            @change="onLoad"
        />
    </div>
</template>

<style lang="less" scoped>
.logs {
    margin-top: 20px;
    .name {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 15px;
        color: #ffffff;
        img {
            margin-right: 8px;
            width: 15px;
        }
    }
    .list {
        margin-top: 12px;
        background: #222328;
        padding: 0 15px;
        border-radius: 12px;
        ul {
            li {
                padding: 15px 0;
                border-bottom: 1px dashed rgba(56, 56, 56, 1);
                .cell1 {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .label {
                        font-weight: 500;
                        font-size: 14px;
                        color: #ffffff;
                    }
                    .value {
                        font-weight: 500;
                        font-size: 15px;
                        color: #ffffff;
                        span {
                            margin-left: 8px;
                        }
                    }
                }
                .cell2 {
                    margin-top: 8px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .time {
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        opacity: 0.3;
                    }
                    .status {
                        padding: 4px 8px;
                        font-weight: 400;
                        font-size: 12px;
                        color: #31be86;
                        border: 1px solid rgba(128, 234, 158, 1);
                        border-radius: 15px;
                        &.status0,
                        &.status1,
                        &.status2 {
                            color: rgba(231, 179, 51, 1);
                            border: 1px solid rgba(231, 179, 51, 1);
                        }
                        &.status3,
                        &.status5 {
                            color: rgba(246, 70, 93, 1);
                            border: 1px solid rgba(246, 70, 93, 1);
                        }
                    }
                }
            }
        }
    }
}
</style>
